<!-- pages/login/index.vue -->
<!-- script可以写多个，也就是说 Vue2 的选项式 可以 和 Vue3 的组合式 混合使用 -->
<script>
  export default { name: 'LoginIndexPage' }
</script>

<script setup>
  import { ref, computed } from 'vue'

  // 导入组件
  import customPassword from './components/password.vue'
  import customMobile from './components/mobile.vue'

  // Vue3.3+ 才支持，而uniapp内置的 Vue3 还不到这个版本
  // defineOptions({
  //   name: 'LoginIndexPage',
  // })

  // 标签页要展示的内容
  const tabMetas = [
    { title: '密码登录', subTitle: '验证码登录' },
    { title: '验证码登录', subTitle: '密码登录' },
  ]

  // 标签页的索引值
  const tabIndex = ref(1)
  //  根据索引值决定当前标签展示的内容
  const tabMeta = computed(() => {
    return tabMetas[tabIndex.value]
  })

  const changeType = () => {
    // 如果是0，要改成1，如果是1，就改成0
    // 0 =布尔值=> false =取反=> true =数字=> 1
    // 1 =布尔值=> true =取反=> false =数字=> 0
    tabIndex.value = +!tabIndex.value
  }

  // QQ登录（仅支持H5端）
  // #ifdef H5
  function onQQButtonClick() {
    window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=102015968&redirect_uri=http://consult-patients.itheima.net/pages/login/qq`
  }
  // #endif
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMeta.title }}</view>
      <view class="type" @click="changeType">
        <text>{{ tabMeta.subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <!-- 用户名&密码方式 -->
    <custom-password v-if="tabIndex === 0" />
    <!-- 短信验证码方式 -->
    <custom-mobile v-if="tabIndex === 1" />
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式111111登录</text>
    </view>
    <view class="social-account">
      <!-- #ifdef H5 -->
      <view @click="onQQButtonClick" class="icon">
        <uni-icons color="#00b0fb" :size="30" type="qq" />
      </view>
      <!-- #endif -->
      <view class="icon">
        <uni-icons color="#fb6622" :size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" :size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
